<template>
  <div class="page-container-padding">
    <div>
      <el-checkbox v-model="level" @change="queryInvestment">只显示未评级方案</el-checkbox>
    </div>
    <div style="line-height:22px;background-color: #C7EFCF;padding:2px 4px;margin-top:6px;">评级说明：根据方案的逻辑性、数据论证度，可操作性、价位情况、语言组织等按给与A、B、C、D、E等级评价，符合五项的A级、四项B级、三项C级、两项D级、一项E级。</div>
    <!-- 列表 -->
    <div style="margin-top: 10px;">
      <div v-show="planList.length==0">
        <el-empty description="暂无未评级的方案"></el-empty>
      </div>
      <el-card v-for="(item,index) in planList" :key="index" style="margin-bottom:10px;">
        <!-- 条目信息显示 -->
        <div>
          <div style="font-size: 16px;">
            <span style="width: 80px;display: inline-block;">方案标题：</span>
            <span style="color: #0077CC;"><a style="text-decoration: underline;font-weight: 700;" target="_blank" :href="fileStorage + item.filepath ">{{ item.title }}</a> <span style="text-decoration: none;">({{ item.admin_name }})</span></span>
            <span style="color: #005599;font-size: 10px;margin-left: 50px;">{{ item.create_time }}</span>
          </div>
          <br>
          <div>
            <span style="width: 70px;display: inline-block;">生效日期：</span><span style="width: 80px;display: inline-block;">{{ item.active_date }}</span>
            <span style="width: 70px;display: inline-block;margin-left: 30px;">结束日期：</span><span>{{ item.expire_date }}</span>
          </div>
          <br>
          <div>
            <span style="width: 70px;display: inline-block;">方案类型：</span><span style="width: 80px;display: inline-block;">{{ item.category }}</span>
            <span style="width: 70px;display: inline-block;margin-left: 30px;">涉及品种：</span><span>{{ item.variety }}</span>
          </div>
          <br>
          <div>
            <span style="width: 70px;display: inline-block;">申请实操：</span><span style="width: 80px;display: inline-block;">{{ item.firm_text }}</span>
          </div>
          <br>
          <div>
            <span>
              <span style="font-size: 17px;font-weight: 700;color: #ff5300;">评级：</span>
              <span style="margin-right: 8px;">
                <el-select v-model="item.examine_level">
                  <el-option value="A" label="A(符合5项)"></el-option>
                  <el-option value="B" label="B(符合4项)"></el-option>
                  <el-option value="C" label="C(符合3项)"></el-option>
                  <el-option value="D" label="D(符合2项)"></el-option>
                  <el-option value="E" label="E(符合1项)"></el-option>
                </el-select>
              </span>
            </span>
          </div>
          <br>
          <div>
            <span style="font-size: 17px;font-weight: 700;color: #ff5300;">意见：</span>
            <span><el-input style="max-width:800px;margin-right:8px;" placeholder="在此输入评此等级的理由" v-model="item.level_explain"></el-input></span>
            <span><el-button type="primary" @click="toSetPlanLevle(index)">保存</el-button></span>
          </div>
          <br>
          <div><span style="cursor:pointer;color: #0066FF;" @click="toShowRecord(index)">模拟跟踪记录<i :class="currentShowIndex == index?'el-icon-caret-bottom':'el-icon-caret-right'"></i></span></div>
        </div>
        <!-- 记录操作 -->
        <div v-show="currentShowIndex == index" style="border-top: 1px dashed #222;margin-top: 10px;padding-top: 10px;">
          <div v-loading="currentShowIndex==index?followTextLoading:false">
            <div style="margin: 10px 0;color:#f34700;font-size:18px;">跟踪记录：</div>
            <div style="margin-top: 10px;" v-for="ft,i in item.followList" :key="'ft'+i">
              <div><span style="color: #0066FF;margin-right: 10px;">{{ ft.active_time }}</span></div>
              <div style="line-height: 24px;text-indent: 2em;">{{ ft.description }}</div>
            </div>
            <div><el-button icon='el-icon-caret-top' type="text" @click="currentShowIndex=-1">收起记录</el-button></div>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :current-page="page"
        :page-size="pageSize"
        :total="totalCount" @current-change="paginatorPageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { fileStorage } from '@/config'
  import { getExamineInvestment, getInvestmentFollow, putInvestPlan } from '@/api/departmentWork/investment'
  export default {
    data(){
      return {
        fileStorage: fileStorage,
        level: true,
        page: 1,
        pageSize: 20,
        totalCount:0,
        planList: [],
        currentShowIndex: -1,
        followTextLoading: false
      }
    },
    mounted() {
      this.queryInvestment()
    },
    methods:{
      paginatorPageChange(page){
        this.page = page
        this.queryInvestment()
      },

      // 查询方案
      queryInvestment(){
        const params = {
          page: this.page,
          page_size: this.pageSize,
          level: this.level?0:1  // 未评级的是0
        }
        getExamineInvestment(params).then(res => {
          const data = res.data
          this.planList = data.plans
          this.page = data.page
          this.totalCount = data.total_count
        })
      },

      // 显示方案的记录
      toShowRecord(index){
        this.currentShowIndex = index
        // 获取当前数据的跟踪记录
        this.followTextLoading = true
        const planItem = this.planList[this.currentShowIndex]
        getInvestmentFollow({ plan_id: planItem.id }).then(res => {
          planItem.followList = res.data.records
          this.followTextLoading = false
        }).catch(err=> {this.followTextLoading = false})
      },

      // 设置方案评级
      toSetPlanLevle(index){
        const planItem = this.planList[index]
        if (planItem.level_explain.length<1 || planItem.examine_level < 1){
          this.$baseMessage('评级不能为0，意见为必填项!', 'error')
          return false
        }
        const levelData = {
          examine_level: planItem.examine_level,
          level_explain: planItem.level_explain
        }
        putInvestPlan(levelData, planItem.id).then(res => {
          this.$baseMessage(res.msg, 'success')
          this.queryInvestment()
        })
      }
    }
  }
</script>

<style>

</style>
